<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ音乐</title>
    <link rel="shortcut icon" href="https://y.qq.com/favicon.ico?max_age=2592000" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/vip-base.css">
    <link rel="stylesheet" href="./css/vip-index.css">
    <link rel="stylesheet" href="./css/vip-base.css">
    <link rel="shortcut icon" href="./upload/favicon.ico" type="image/x-icon">
</head>

<body>
    <!-- 第一个背景图 -->
    <div class="bg1">
        <!-- 背景图片 -->
        <ul class="picture feature_box" id="first_page">
            <li class="picture_show_item picture_show_item_img ">
                <img src="https://y.gtimg.cn/mediastyle/music_svip/img/gallery/banner_thumb_1.jpg?max_age=2592000&v=3c0ee8f26ec6c50fa6600215e2a869c3"
                    alt="">
            </li>
            <li class=" picture_show_item">
                <img src="https://y.gtimg.cn/mediastyle/music_svip/img/gallery/banner_thumb_2.jpg?max_age=2592000&v=6c7399d7da752d47eecd30d2adf259f3"
                    alt="">
            </li>
            <li class="picture_show_item">
                <img src="https://y.gtimg.cn/mediastyle/music_svip/img/gallery/banner_thumb_3.jpg?max_age=2592000&v=6bf2cf998d53dabffd1920993274c4d5"
                    alt="">
            </li>
        </ul>

        <!-- 头部 -->
        <div class="nav">
            <div class="width head">
                <ul>
                    <li>
                        <a href="./index.html"><img src="https://y.gtimg.cn/mediastyle/music_svip/img/logo.png?max_age=2592000&v=fa239e384c8df84e499677271e246c12"
                            alt=""></a>
                    </li>
                    <li><a href="#" id="color">首页</a></li>
                    <li><a href="./vip-power.html">特权与等级</a></li>
                    <li><a href="./vip-annual-fee-zone.html">年费专区</a></li>
                </ul>
                <ul class="right">
                    <li>您还没有登录，</li>
                    <li><a href="#">请马上登录</a></li>
                </ul>
            </div>
        </div>
        <!-- 开通绿钻区域 -->
        <!-- 绿钻豪华版 -->
        <div class="center">
            <div class="banner">
                <h2 class="banner_show_title banner_show_title--1 plays">绿钻豪华版</h2>
                <h2 class="banner_show_title banner_show_title--2">年费绿钻</h2>
                <h2 class="banner_show_title banner_show_title--3">付费音乐包</h2>
            </div>
            <!-- 音乐，更优悦 -->
            <div class="banner_show__con">
                <p class="banner_show__text banner_show__text--1 play">音乐，更优悦</p>
                <p class="banner_show__text banner_show__text--2 ">当热爱成为一种习惯</p>
                <p class="banner_show__text banner_show__text--3">让创作更有价值</p>
            </div>
            <!-- 立即开通 -->
            <a href="#" class="banner_show_btn" data-code="xxzxhh">立即开通</a>
        </div>
        <!-- 第一张背景图的底部点击变换区域 -->
        <div class="banner_show_nav">
            <div class="container width">
                <a href="javascript:;" class="banner_show_nav__item banner_show_nav__item--1" data-code="xxzxhh"
                    data-id="0" style="background-position: -800px 0;">
                    <span class="banner_show_nav__item_con ">绿钻豪华版</span>
                </a>
                <a href="javascript:;" class="banner_show_nav__item banner_show_nav__item--2 " data-code="xxzxhh_n"
                    data-id="1">
                    <span class="banner_show_nav__item_con">年费绿钻豪华版</span>
                </a>
                <a href="javascript:;" class="banner_show_nav__item banner_show_nav__item--3" data-code="qqmsey"
                    data-id="2">
                    <span class="banner_show_nav__item_con">付费音乐包</span>
                </a>
            </div>
        </div>
    </div>
    <!-- 第二个背景图 -->
    <div class="bg2">
        <div class="bg2_one feature_box" id="second_page">
            <img src="https://y.gtimg.cn/mediastyle/music_svip/img/gallery/feature_thumb_1.jpg?max_age=2592000&v=3c3189a98cf989430acc19aca893c961"
                alt="">
        </div>
        <!-- 音乐不将就 -->
        <div class="bg2_two">
            <h2 class="feature_title feature_title--1">音乐，不将就</h2>
            <p class="feature_text feature_text--1">对音乐的追求，从这里开始。付费歌曲畅享无阻，HQ高品质许你完美沉浸的听觉盛宴，SQ无损极致保留音乐的原生态，让耳朵捕捉音源现场的震撼。
            </p>
            <div class="HQ">
                <ul>
                    <li>
                        <a href="3">高品质音乐的下载</a>
                    </li>
                    <li>
                        <a href="#">无损音乐下载</a>
                    </li>
                    <li>
                        <a href="#">付费音乐下载</a>
                    </li>
                </ul>
            </div>
            <!-- 精灵图条条 -->
            <div class="feature_item_shape feature_item_shape--1_2">1</div>
            <div class="feature_item_shape feature_item_shape--1_3"></div>
        </div>
    </div>
    <!-- 爱豆在一起 -->
    <div class="feature_box">
        <div class="feature_bg feature_bg--2" style="height: 740px;" id="3rd_page"></div>
        <div class="feature_intro">
            <div class="container width">
                <h2 class="feature_title feature_title--2">爱豆，在一起</h2>
                <div class="feature_con">
                    <p class="feature_text feature_text--2">
                        这里有定制的大咖主题，明星亲笔制作属于你的「歌词海报」，最前沿的艺人活动资讯及偶像亲密接触。音乐之旅，一路有爱豆陪伴身边。</p>
                </div>
                <div class="ft_privi">
                    <ul class="ft_privi_list">
                        <li class="ft_privi_item">
                            <a href="//y.qq.com/portal/vipportal/detail/personal_topic.html">
                                <span class="ft_privi_icon ft_privi_icon--style_theme"></span>
                                <span class="ft_privi_text">个性主题</span>
                            </a>
                        </li>
                        <li class="ft_privi_item">
                            <a href="//y.qq.com/portal/vipportal/detail/lyric_poster.html">
                                <span class="ft_privi_icon ft_privi_icon--geci_font"></span>
                                <span class="ft_privi_text">歌词海报字体</span>
                            </a>
                        </li>
                        <li class="ft_privi_item">
                            <a href="//y.qq.com/portal/vipportal/detail/danmu_pop.html">
                                <span class="ft_privi_icon ft_privi_icon--danmu_pop"></span>
                                <span class="ft_privi_text">个性弹幕气泡</span>
                            </a>
                        </li>
                        <li class="ft_privi_item">
                            <a href="//y.qq.com/portal/vipportal/detail/first_concert.html">
                                <span class="ft_privi_icon ft_privi_icon--qqmusic_shou"></span>
                                <span class="ft_privi_text">QQ音乐首唱会</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="feature_item_shape feature_item_shape--2_1"></div>
            <div class="feature_item_shape feature_item_shape--2_2"></div>
            <div class="feature_item_shape feature_item_shape--2_3"></div>
        </div>
    </div>
    <!-- 我就要不一样 -->
    <div class="section mod_feature feature--3 active" data-anchor="4th_page" style="height: 1100px;">
        <div class="feature_box">
            <div class="feature_bg feature_bg--3" style="height: 740px;" id="4th_page"></div>
            <div class="feature_intro">
                <div class="container width">
                    <h2 class="feature_title feature_title--3">我，就要不一样</h2>
                    <div class="feature_con">
                        <p class="feature_text3">
                            专属定制的闪电图标、付费音乐图标，集双重特权于一身，光彩夺目，等级成长加速，让你彰显不同。</p>
                    </div>
                    <div class="ft_privi">
                        <ul class="ft_privi_list">
                            <li class="ft_privi_item">
                                <a href="//y.qq.com/portal/vipportal/detail/premier_lightning_icon.html">
                                    <span class="ft_privi_icon ft_privi_icon--flash_svip"></span>
                                    <span class="ft_privi_text">闪电尊贵图标</span>
                                </a>
                            </li>
                            <li class="ft_privi_item">
                                <a href="//y.qq.com/portal/vipportal/detail/ffb_logo.html">
                                    <span class="ft_privi_icon ft_privi_icon--spec_icon"></span>
                                    <span class="ft_privi_text">付费音乐专属图标</span>
                                </a>
                            </li>
                            <li class="ft_privi_item">
                                <a href="//y.qq.com/portal/vipportal/detail/growup.html">
                                    <span class="ft_privi_icon ft_privi_icon--grow_speed"></span>
                                    <span class="ft_privi_text">成长加速</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="feature_item_shape feature_item_shape--3_2"></div>
                <div class="feature_item_shape feature_item_shape--3_3"></div>
            </div>
            <div class="feature_item_shape feature_item_shape--3_1"></div>
        </div>
    </div>
    <!-- 心情让你所见 -->
    <div class="section mod_feature feature--4 js_wx_hide active" data-anchor="5th_page" style="height: 1100px;">
        <div class="feature_box">
            <div class="feature_bg feature_bg--4" style="height: 740px;" id="5th_page"></div>
            <div class="feature_intro">
                <div class="container width">
                    <h2 class="feature_title feature_title--4">心情，让你听见</h2>
                    <div class="feature_con">
                        <p class="feature_text feature_text--4">
                            一样的喧嚣城市,不一样的音乐心情。在QQ循环播放个性音乐,或是在QQ空间设置背景音乐,向你诉说,我的情愫，我的世界。</p>
                    </div>
                    <div class="ft_privi">
                        <ul class="ft_privi_list-4">
                            <li class="ft_privi_item">
                                <a href="//y.qq.com/portal/vipportal/detail/bgmusic_set.html">
                                    <span class="ft_privi_icon ft_privi_icon--qqzone_bgm"></span>
                                    <span class="ft_privi_text">QQ空间背景音乐</span>
                                </a>
                            </li>
                            <li class="ft_privi_item">
                                <a href="//y.qq.com/portal/vipportal/detail/personal_music.html">
                                    <span class="ft_privi_icon ft_privi_icon--style_bgm"></span>
                                    <span class="ft_privi_text">个性音乐</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="feature_item_shape feature_item_shape--4_2"></div>
                <div class="feature_item_shape feature_item_shape--4_3"></div>
            </div>
            <div class="feature_item_shape feature_item_shape--4_1"></div>

            <div class="feature_item_shape feature_item_shape--4_4"></div>
        </div>
    </div>
    <!-- 侧边栏 -->
    <div class="mod_control">
        <ul class="mod_tag">
            <li class="control_item " data-menuanchor="first_page"><a href="#first_page"
                    class="control_item--link active"></a></li>
            <li class="control_item" data-menuanchor="second_page"><a href="#second_page"
                    class="control_item--link"></a></li>
            <li class="control_item" data-menuanchor="3rd_page"><a href="#3rd_page" class="control_item--link"></a>
            </li>
            <li class="control_item" data-menuanchor="4th_page"><a href="#4th_page" class="control_item--link"></a>
            </li>
            <li class="control_item js_wx_hide" data-menuanchor="5th_page"><a href="#5th_page"
                    class="control_item--link"></a></li>
        </ul>
        <ul class="mod_tool_bar" style=" padding-top:54px;">
            <!-- <li class="tool_bar__item">
                <a class="tool_bar__icon tool_bar__icon_qq" href="javascript:;">
                    <div class="tool_bar__qrcode">
                        <p>官方手Q公众号</p>
                        <img src="//y.gtimg.cn/mediastyle/music_svip/img/qrcode_1.png?max_age=2592000" class="tool_bar__qr_pic"/>
                        <p class="tool_bar__qrcode_sp">扫码免费领<br><span class="sp_txt">7天</span>豪华绿钻</p>
                    </div>
                </a>
            </li> -->
            <li class="tool_bar__item">
                <a class="tool_bar__icon tool_bar__icon_wechat" href="javascript:;">
                    <div class="tool_bar__qrcode">
                        <p>官方微信公众号</p>
                        <img src="" alt="">
                        <p class="tool_bar__qrcode_sp">精彩内容<br>尽在QQ音乐VIP</p>
                    </div>
                </a>
            </li>
            <!-- <li class="tool_bar__item">
                <a class="tool_bar__icon tool_bar__icon_buluo" href="http://buluo.qq.com/p/barindex.html?bid=254763" target="_blank">
                    <div class="tool_bar__qrcode_mini">
                        <p>兴趣部落</p>
                    </div>
                </a>
            </li> -->
            <li class="tool_bar__item">
                <a class="tool_bar__icon tool_bar__icon_exchange" href="https://y.qq.com/vip/lvkey/index.html"
                    target="_blank">
                    <div class="tool_bar__qrcode_mini">
                        <p>兑换中心</p>
                    </div>
                </a>
            </li>
            <li class="tool_bar__item">
                <a class="tool_bar__icon tool_bar__icon_service" href="https://y.qq.com/m/client/helper/pc.html"
                    target="_blank">
                    <div class="tool_bar__qrcode_mini">
                        <p>客服中心</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <script src="./js/vip-index.js">

    </script>
</body>

</html>